<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2023/6/19
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>

<html>

<head>
    <title>男女比例</title>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body background="4.jpg">
<a href="index2.jsp" style="margin-top: 800px" ><h4>返回</h4></a>

<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title : {
            text: '男女人数总和',
          //  subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['男生','女生']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:2180, name:'女生'},
                    {value:1850, name:'男生'},

                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>
